<template>
    <!-- {{ $router }} -->
    <!-- {{$router.options.routes}} -->

    <!--  :default-active="$route.path" 设置高亮 -->
    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" active-text-color="#ffd04b"
        background-color="#545c64" text-color="#fff" :collapse="isCollapse" :router="true">
        <!-- :router = "true" 开启路由交互应用  -->
        <!-- router 路由跳转(一般在菜单中使用) route 获取值 -->

        <el-row class="row-bg" justify="center">
            <el-col :span="5">
                <!-- 动态组件加载 -->
                <component :is="topIcon" class="icon2" @click="openorClose"></component>
            
            </el-col>
        </el-row>

        <template v-for="(item, index) in $router.options.routes">

            <el-menu-item :index="item.path" v-if="item.children == undefined && item.meta.show == true">

                <!-- 这是一种固定图标写死的操作 -->
                <!-- <el-icon><House /></el-icon> -->

                <!-- 动态加载组件--动态拿图标的方法 -->
                <!-- :is是加载的值，component 组件 -->
                <component :is="item.meta.icon" class="icon"></component>

                <span>{{ item.meta.title }}</span>
            </el-menu-item>


            <el-sub-menu :index="item.path" v-if="item.children != undefined && item.meta.show == true">
                <template #title>
                    <!-- <el-icon><location /></el-icon> -->
                    <component :is="item.meta.icon" class="icon"></component>
                    <span>{{ item.meta.title }}</span>
                </template>
                <el-menu-item-group>

                    <template v-for="(item2, index2) in item.children">
                        <el-menu-item :index="item2.path" v-if="item2.meta.show == true">
                            <component :is="item2.meta.icon" class="icon"></component>
                            {{ item2.meta.title }}
                        </el-menu-item>

                    </template>

                </el-menu-item-group>

            </el-sub-menu>
        </template>
    </el-menu>
</template>

<script setup lang="ts">

import { ref } from 'vue'
const isCollapse = ref(false)

const topIcon = ref("Expand")
const openorClose = ()=>{
    topIcon.value = isCollapse.value === true ? "Expand":"Fold"
    isCollapse.value = !isCollapse.value
    
}
</script>

<style scoped>
.icon {
    width: 16px;
    height: 16px;
    padding-right: 5px;
}
.icon2{
    width: 20px;
    height: 20px;
    color: aliceblue;
    cursor: pointer;
    padding-top: 7px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: 100%;
    min-height: calc(100vh - 50px);

}
</style>
<style>
.el-sub-menu__title{
    /* 优先级选择 更改内联样式 */
    padding-right: 0px !important;
}

.el-menu--collapse {
    /* 动态屏幕的占比 计算  calc动态计算
     100vh 代表整合屏幕的高 - 头部的高度 header 
      calc(100vh - 60px) 必须前后都要有空格
    */
   min-height: calc(100vh - 60px);
}
</style>